.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;


  .top {
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.2s ease;
    z-index: 2;

    &.open {
      width: 85%;
    }

    &.close {
      width: 95%;
    }
  }

  .left {
    position: fixed;
    top: 0;
    z-index: 1;
    height: 100%;
    transition: all 0.2s ease;
    background-color: #f9f9f9;
    overflow: visible;

    &.open {
      width: 15%;
    }

    &.close {
      width: 5%;
    }
  }

  .right {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: #f9f9f9;
    // background-color: red;
    transition: all 0.2s ease;

    &.open {
      width: 85%;
    }

    &.close {
      width: 95%;
    }

    .bottom {
      margin: 30px 0 0 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 95%;
      height: 270px;
    }

    i.icon-icon_huidaodingbu {
      position: fixed;
      z-index: 999;
      right: 10px;
      bottom: 100px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      font-size: 20px;
      color: #333333;
      background-color: #e5e5e5;
      transition: all 0.5s ease;
    }
  }

}

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 3px;
  /* 滚动条宽度 */
  height: 0px;
  /* 横向滚动条高度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #cd297d;
  /* 滑块颜色 */
  border-radius: 5px;
  /* 滑块圆角 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f0f0f0;
  /* 滚动条轨道颜色 */
  border-radius: 5px;
  /* 轨道圆角 */
}